<template>
  <div>
    <van-nav-bar title="配送站设置" />
    <upload-pic @iconChange="iconChange" :showIcon="form.icon || ''"></upload-pic>
    <van-cell-group>
      <van-field v-model="form.stationName" label="配送站名称" clearable v-validate="'required'" data-vv-name="配送站名称"
        :error-message="errors.first('配送站名称')" placeholder="请输入配送站名称" required maxLength="20" />
      <van-field v-model="form.stationContact" label="联系方式" clearable v-validate="'required|mobile'" data-vv-name="联系方式"
        :error-message="errors.first('联系方式')" placeholder="请输入配送站联系方式" required maxLength="20" />
      <van-field v-model="form.userName" label="负责人名称" clearable v-validate="'required'" data-vv-name="负责人名称"
        :error-message="errors.first('负责人名称')" placeholder="请输入负责人名称" required maxLength="20" />
      <van-field v-model="form.userContact" label="联系方式" clearable v-validate="'required|mobile'" data-vv-name="负责人联系方式"
        :error-message="errors.first('负责人联系方式')" placeholder="请输入负责人联系方式" required maxLength="20" />
      <van-field v-model="form.region" @focus="focusCity" label="所在城市" readonly placeholder="请选择所在城市" required />
      <van-field v-model="form.address" label="详细地址" clearable v-validate="'required'" data-vv-name="详细地址"
        :error-message="errors.first('详细地址')" type="textarea" placeholder="请输入详细地址" @input="changeAddress" required
        maxLength="80" />
      <van-field v-model="form.openTime" @focus="focusStart" label="营业开始时间" readonly v-validate="'required'"
        data-vv-name="营业开始时间" :error-message="errors.first('营业开始时间')" placeholder="" required />
      <van-field v-model="form.closeTime" @focus="focusEnd" label="营业结束时间" readonly v-validate="'required'"
        data-vv-name="营业结束时间" :error-message="errors.first('营业结束时间')" placeholder="" required />
      <van-field v-model="form.businessRemarks" label="营业备注" clearable v-validate="'required'" data-vv-name="营业备注"
        :error-message="errors.first('营业备注')" type="textarea" placeholder="请输入营业备注（150字以内）" required maxLength="150" />
      <van-field v-model="form.description" label="简介" clearable v-validate="'required'" data-vv-name="简介"
        :error-message="errors.first('简介')" type="textarea" placeholder="请输入配送站简介（150字以内）" required maxLength="150" />
    </van-cell-group>
    <van-popup v-model="popupShow" position="bottom">
      <van-area :area-list="areaList" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
    <van-popup v-model="startShow" position="bottom">
      <van-datetime-picker @confirm="startConfirm" @cancel="startCancel" v-model="startTime" type="time" />
    </van-popup>
    <van-popup v-model="endShow" position="bottom">
      <van-datetime-picker @confirm="endConfirm" @cancel="endCancel" v-model="endTime" type="time" />
    </van-popup>

    <van-button class="bottom-btn" size="large" type="info" @click="edit">保存</van-button>
  </div>
</template>

<script>
  import UploadPic from '@/components/UploadPic'
  import area from '@/util/area'
  import {
    GET_DETAIL,
    UPDATE_STATION,
    STATION_CHECK,
    GET_TOKEN

  } from '@/api/user'

  export default {
    components: {
      UploadPic
    },
    data() {
      return {
        startTime: '',
        endTime: '',
        form: {},
        isChangeLocation: false,
        popupShow: false,
        areaList: area,
        // token: sessionStorage.getItem('token'),
        openid: sessionStorage.getItem('openid'),
        startShow: false,
        endShow: false
      }
    },
    mounted() {
      this.$toast('您的审核未通过，请重新填写信息，提交水厂审核')
      this.getToken()
    },
    methods: {
      async getToken() {
        let tokenRes = await this.$reqGet(GET_TOKEN, {
          openid: this.openid
        });
        this.token = tokenRes.token
        this.getDetail();
      },
      focusStart() {
        this.startShow = true
      },
      focusEnd() {
        this.endShow = true
      },
      startCancel() {
        this.startShow = false
      },
      startConfirm() {
        this.form.openTime = this.startTime
        this.startShow = false
      },
      endCancel() {
        this.endShow = false
      },
      endConfirm() {
        this.form.closeTime = this.endTime
        this.endShow = false
      },
      changeAddress() {
        this.isChangeLocation = true
      },
      getDetail() {
        this.$reqPost(GET_DETAIL + '?token=' + this.token).then(res => {
          let info = res.data;
          this.form = {
            id: info.id,
            stationName: info.name,
            stationContact: info.phone,
            region: info.region,
            address: info.address,
            description: info.description,
            latitude: info.latitude,
            longitude: info.longitude,
            openid: info.openid,
            userName: info.managerName,
            userContact: info.managerPhone,
            icon: info.icon,
            managerId: info.managerId,
            cardNo: info.cardNo || '',
            openTime: info.openTime,
            closeTime: info.closeTime,
            businessRemarks: info.businessRemarks
          }
        });
      },
      //编辑
      edit() {
        if (!this.form.icon) {
          this.$toast('请选择图片');
          return;
        }
        this.$validator.validateAll().then((result) => {
          if (result) {
            this.confirmEdit()
          }
        })
      },
      confirmEdit() {
        let param = {
          id: this.form.id,
          address: this.form.address,
          description: this.form.description,
          latitude: this.form.latitude,
          longitude: this.form.longitude,
          name: this.form.stationName,
          openid: this.form.openid,
          phone: this.form.stationContact,
          region: this.form.region,
          sManager: {
            name: this.form.userName,
            phone: this.form.userContact,
            id: this.form.managerId
          },
          icon: this.form.icon || '',
          cardNo: this.form.cardNo,
          openTime: this.form.openTime,
          closeTime: this.form.closeTime,
          businessRemarks: this.form.businessRemarks
        }
        param.verify = 2
        this.$reqPost(UPDATE_STATION, param).then(res => {
          this.$reqPost(GET_DETAIL + '?token=' + sessionStorage.getItem('token')).then(res => {
            this.$store.dispatch('setStationInfo', res.data);
          });
          sessionStorage.removeItem('status')
          this.$toast('保存成功');
          setTimeout(() => {
            this.$router.replace('/')
          }, 1200)
        })

      },
      leftClick() {
        this.$router.go(-1)
      },
      //取消选择行政区划
      onCancel() {
        this.popupShow = false;
      },
      //确认选择行政区划
      onConfirm(val) {
        let res = [];
        val.forEach(el => {
          res.push(el.name);
        });
        if (res.join(' ') != this.form.region) {
          this.isChangeLocation = true
        }
        this.form.region = res.join(' ');
        this.popupShow = false;
      },
      //选择行政区划
      focusCity() {
        this.popupShow = true;
      },
      //头像上传
      iconChange(val) {
        this.form.icon = val;
      }
    }
  }

</script>
